#{extends 'main.html' /}
#{set title:'Tv Series Details' /}

#{set 'moreStyles'}
#{stylesheet 'jquery.ratings.css' /}
#{/set}

#{set 'moreScripts'}
#{script 'jquery.ratings.js'  /}
#{/set}
 

<div class="series_tab">
<div class="series_title">${series?.name}</div>
<div class="series_follow">
#{if user?.follows?.contains(series)}
	<img src="@{'/public/images/remove_icon.png'}" width="14" height="14" border="0" style="vertical-align:middle;" /> 
	<a href="/s/${series?.id}/unfollow">Unfollow</a>
#{/if}
#{else}
<img src="@{'/public/images/plus_icon.gif'}" width="14" height="14" border="0" style="vertical-align:middle;" /> 
    <a href="/s/${series?.id}/follow">Follow</a>
#{/else}
</div>
<div class="series_follow">
	<img src="@{'/public/images/facebookShareIcon.png'}" width="14" height="14" border="0" style="vertical-align:middle;" />
	<a href=""  onclick="postToFeed('${series?.name} @ TV World', 'http://54.246.83.207:9007${series?.poster}', '${user?.name} follows ${series?.name}', '${series?.name} @ TV World', 'http://apps.facebook.com/cengdoi-gg/s/${series?.id}',''); return false;">Share</a>
</div>
</div>

<div class="clear" style="height: 10px;"></div>

<div class="series_menu">
<a href="/s/${series?.id}" class="series_menu_a_active">Details</a> 
<a href="/s/${series?.id}/topics" class="series_menu_a">Topics</a> 
<a href="/s/${series?.id}/videos" class="series_menu_a">Videos</a> 
<a href="/s/${series?.id}/episodes" class="series_menu_a">Episodes</a>
</div>

<div class="clear" style="height: 10px;"></div>

<div class="series_tab">
	<div class="series_poster"><img src="${series?.poster}" width="200" alt="${series?.name} Poster" /></div>
	<div class="series_details">

		<div class="table-row">
			<div class="left-container">Rating:</div>
			<div class="right-container">
				<span id="example-1"></span> &nbsp; 
				<span id="rating">${series?.avgRate}</span> &nbsp; 
				<span id="example-rating-1" class="float: right">
				#{if rate}
				(Your Rate: ${rate?.rate})
				#{/if}
				</span>
			</div>
		</div>
		
		<div class="table-row">
			<div class="left-container">#Followers:</div>
			<div class="right-container">${series?.followers?.size()}</div>
		</div>
		
		#{if series?.director}
		<div class="table-row">
			<div class="left-container">Director:</div>
			<div class="right-container">${series?.director}</div>
		</div>
		#{/if}
		
		#{if series?.country}
		<div class="table-row">
			<div class="left-container">Country:</div>
			<div class="right-container">${series?.country}</div>
		</div>
		#{/if}
	
		#{if series?.genres}
		<div class="table-row">
			<div class="left-container">Genres:</div>
			<div class="right-container">
			#{list items:series?.genres, as:'genre'}
			${genre}, 
			#{/list}</div>
		</div>
		#{/if}
		
		#{if series?.channel}
		<div class="table-row">
			<div class="left-container">TV Channel:</div>
			<div class="right-container">${series?.channel}</div>
		</div>
		#{/if}
		
		#{if series?.airDay}
		<div class="table-row">
			<div class="left-container">Air Day:</div>
			<div class="right-container">${series?.airDay}</div>
		</div>
		#{/if}
		
		#{if series?.airTime}
		<div class="table-row">
			<div class="left-container">Air Time:</div>
			<div class="right-container">${series?.getFormattedAirTime()}  ${series?.timezone}</div>
		</div>
		#{/if}
		
		#{if series?.startDate}
		<div class="table-row">
			<div class="left-container">Start Date:</div>
			<div class="right-container">${series?.startDate}</div>
		</div>
		#{/if}
		
		#{if series?.endDate}
		<div class="table-row">
			<div class="left-container">End Date:</div>
			<div class="right-container">${series?.endDate}</div>
		</div>
		#{/if}
		
	</div>
</div>


<div class="clear" style="height: 20px;"></div>


<fieldset class="comment_fieldset" style="width: 698px; float: left;">
<legend class="legend_style">Cast</legend>
	${series?.casts}
</fieldset>

<div class="clear" style="height: 20px;"></div>

<fieldset class="comment_fieldset" style="width: 698px; float: left;">
<legend class="legend_style">Summary</legend>
${series?.summary}
</fieldset>


<div class="clear" style="height: 20px;"></div>


<fieldset class="comment_fieldset" style="width: 698px">
<legend class="legend_style">Comments</legend>
	<div class="comment_list">
	#{paginate.list items:paginator, as:'comm'}
		
	<div class="comments">
	<div class="show_user_comment_pic"><img src="${comm?.getUser()?.profilPicture}" width="30" height="30" border="0" /></div>
	
	<div class="show_user_comment">${comm?.getUser()?.name}:</div>
	
    
	<div class="show_comment">
	
	#{if comm.comment.startsWith("<spoiler>") && comm.comment.endsWith("</spoiler>")}
	<div class="spoiler">
    <input type="button" onclick="showSpoiler(this);" value="Show/Hide Spoiler" />
    <div class="inner" style="display:none;">
	${comm?.comment.replaceAll("<[^>]*>", "")}
	</div>
	</div>
	#{/if}
	
	#{else}
	${comm?.comment}
	#{/else}
	
	</div>
	
	
	#{if user?.comments?.contains(comm)}
	<div class="delete-comment">
	<a class="delete-comment-button" href="/s/${series?.id}/deletecomment/${comm?.id}"></a>
	</div>
	#{/if}
	
	</div>
	<br />
	#{/paginate.list} 
	<div class="clear" style="height: 10px; text-align:center;"></div>
    #{paginate.controls items:paginator /} 
    
	</div>
</fieldset>


<div class="clear" style="height: 20px;"></div>
	
	
<div class="series_tab">

#{ifErrors}
   <p class="errorleft">
        Field are required!
   </p>
   <div class="clear" style="height: 20px;"></div>
#{/ifErrors}	
<div class="series_title" style="text-align:left; width: 100%;">Post a comment</div>
 
<div style="text-align:left; width: 100%;">
#{form @Series.postComment(series.id)}

    <textarea name="comment" id="comment" style="border: 1px solid #59983B;"></textarea><br />
    <input type="submit" value="Submit your comment!" class="button_border" />
    
#{/form}
    <button onclick="ModifySelection ()" class="button_border">Add Spoiler Tag</button>
</div>
</div>


<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  $('#example-1').ratings(10,${series?.avgRate}).bind('ratingchanged', function(event, data) {
	  
    $('#example-rating-1').text('(Your Rate: ' + data.rating + ')');
    
    $.get(
    		'/Series/giveRate',
    		{rating: data.rating, sid:${series?.id} },
    		function(ajaxCevap) {
    			$('#rating').html(ajaxCevap)
    		}
    );
    
  });
  
});
</script>



